<ScrollView sdkExampleTitle sdkToggleNavButton>
    <GridLayout rows="auto, auto, auto, 250, auto" columns="*" class="form">

        <Label class="h3 m-15 text-left" row="0" text="Create a Color from hex value" textWrap="true"></Label>
        <TextField class="m-15 input input-border" row="1" hint="Enter hex color e.g. F3A or DD00AA" #hexField [text]="'#' + (redValue | sdkHex) + (greenValue | sdkHex) + (blueValue | sdkHex)"></TextField>
        <Button class="btn btn-primary btn-active" row="2" text="Change Color" (tap)="changeColor(hexField.text)"></Button>

        <GridLayout class="p-15 m-15" row="3" [backgroundColor]="'#' + (redValue | sdkHex) + (greenValue | sdkHex) + (blueValue | sdkHex)">
        </GridLayout>

        <GridLayout row="4" rows="auto, auto, auto" columns="auto, *">
            <Label class="m-15 text-left" row="0" col="0" text="Red  " textWrap="true"></Label>
            <Slider class="m-15 slider" row="0" col="1" minValue="0" maxValue="255" [(ngModel)]="redValue"></Slider>
            <Label class="m-15 text-left" row="1" col="0" text="Green" textWrap="true"></Label>
            <Slider class="m-15 slider" row="1" col="1" minValue="0" maxValue="255" [(ngModel)]="greenValue"></Slider>
            <Label class="m-15 text-left" row="2" col="0" text="Blue " textWrap="true"></Label>
            <Slider class="m-15 slider" row="2" col="1" minValue="0" maxValue="255" [(ngModel)]="blueValue"></Slider>
        </GridLayout>

    </GridLayout>
</ScrollView>